<template>
  <router-view />
</template>

<script>
import {useStore} from "vuex";
import {watch} from "vue";

export default {
  name: 'App',

  setup() {

    const store = useStore()  // 该方法用于返回store 实例

    if (sessionStorage.getItem("editableTabs") != null) {
      store.state.tabMenu.editableTabsValue = sessionStorage.getItem("editableTabsValue")
      store.state.tabMenu.editableTabs = JSON.parse(sessionStorage.getItem("editableTabs"))
      store.state.tabMenu.tabIndex = 2
    }

    watch(() => store.state.tabMenu.editableTabsValue, (newValue, oldValue) => {
      sessionStorage.setItem("editableTabsValue", newValue)
      let editableTabs = store.state.tabMenu.editableTabs;
      // let tabs = []
      // // tabs.push(
      // //     {
      // //       title: '首页',
      // //       name: '首页',
      // //       comName: 'Home'
      // //     })
      // if (editableTabs.length !== 1) {
      //   editableTabs.forEach((tab, index) => {
      //     if (tab.name === newValue) {
      //       // if (tab.name !== "首页") {
      //         tabs.push(editableTabs[index])
      //       // }
      //     }
      //   })
      // }
      sessionStorage.setItem("editableTabs", JSON.stringify(editableTabs))
    })



  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.el-dialog {
  min-width: 500px;
}
</style>
